import React, { Component } from 'react'
import { Layout } from 'antd';
import { Menu, Button } from 'antd';
import RouterView from '../router/routerView'
import MyHeader from './myHeader';
import {
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from '@ant-design/icons';
import { NavLink } from 'react-router-dom';
const { SubMenu } = Menu;

const { Header, Footer, Sider, Content } = Layout;
const style = {
    width:"100%",
    height:"100%"
}
const headerstyle = {
    background:"skyblue"
}
class App extends Component {
    state = {
        collapsed: 'false',
      };
    
      toggleCollapsed = () => {
        this.setState({
          collapsed: !this.state.collapsed,
        });
      };
  render() {
    console.log(this.props)
    return (
      <div style={style}>
           <Layout style={style} >
                <Header style={headerstyle}>
                 <MyHeader></MyHeader>
                </Header>
            <Layout>
                <Sider>
                <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          collapsed={this.state.collapsed}
        >
          <Menu.Item key="1" icon={<PieChartOutlined />}>
            <NavLink to="/app/dh1">导航1</NavLink>
          </Menu.Item>
          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
            <Menu.Item key="5">
                <NavLink to="/app/dh2">导航2</NavLink>
            </Menu.Item>
          </SubMenu>
        </Menu>
                </Sider>
                <Content>
                    <RouterView RouterList = {this.props.child}></RouterView>
                </Content>
            </Layout>
          
            </Layout>
      </div>
    )
  }
}

export default App